<template>
  <div ref="layout2" class="HB-wrap">
    <!-- 头部 -->
    <a-row class="HB-header">
      <Header :title="routeTitle" />
    </a-row>
    <!-- 全屏背景-->
    <div v-if="layoutData.bg" class="HB-bg">
      <div class="HB-bg-cover" />
      <Box :component="layoutData.bg" :is-bg="true" />
    </div>
    <!-- 内容区域 -->
    <a-row
      v-if="updateView"
      :class="{'HB-content':true,'enableBgAction':enableBgAction}"
      :gutter="layoutData.between"
    >
      <template>
        <a-col
          v-for="(columns,colIdx) in layoutData.columns"
          :key="colIdx"
          class="HB-col"
          :span="columns.width"
        >
          <div
            v-for="(box,index) in layoutData[columns.key]"
            :key="colIdx + '-' + index"
            :style="{'height':box.height + '%'}"
          >
            <template v-if="hasChildren(box)">
              <a-row style="height: 100%" :gutter="box.between">
                <a-col v-for="(children,i) in box.children" :key="i" :span="children.width" style="height: 100%">
                  <Box :component="children" />
                </a-col>
              </a-row>
            </template>
            <template v-else>
              <Box :component="box" />
            </template>
          </div>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script>
import layoutMap from './js/export'
import Header from '@/views/pages/components/header.vue'
import Box from '@/views/pages/components/box.vue'
import mouse from './mixins/mouse'
export default {
  name: 'Layout',
  components: {
    Header,
    Box
  },
  mixins: [mouse],
  props: {},
  data() {
    return {
      layoutData: [],
      updateView: true
    }
  },
  computed: {
    routeName() {
      return this.$route.name
    },
    routeTitle() {
      return this.$route.meta || ''
    }
  },
  watch: {
    routeName() {
      this.updateView = false
      this.loadLayout()
      this.$nextTick(() => {
        this.updateView = true
        this.$nextTick(() => {
          if (this.layoutData.bg) {
            this.startListening()
          } else {
            this.stopListening()
          }
        })
      })
    }
  },
  created() {
    this.loadLayout()
  },
  methods: {
    loadLayout() {
      const name = this.routeName
      this.layoutData = layoutMap[name]
      console.log(this.layoutData.bg, 'layoutDatalayoutData')
    },
    hasChildren(item) {
      if (item.children && item.children.length > 0) {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="less" scoped>
</style>

